<div class="tab-pane" id="tab-charts" role="tabpanel" aria-labelledby="nav-charts">
	<div class="card">
		<div class="card-header">
			<div class="row align-items-center">
				<div class="col">
					<div class="h4 mb-0"><i class="bi bi-box-seam me-2"></i>Charts</div>
				</div>
				<div class="col-auto">
					<a href="https://gitbrent.github.io/PptxGenJS/docs/api-charts/" title="Documentation" target="_blank">
						Docs<i class="bi bi-box-arrow-up-right ms-2"></i>
					</a>
				</div>
			</div>
		</div>
		<div class="card-body">
			<div class="row row-cols-auto gx-4 gy-5 mb-4">
				<div class="col">
					<h5>Slides 1-5</h5>
					<h6>Bar Chart</h6>
					<ul class="list-group list-group-flush">
						<li class="list-group-item">Chart title, axis props</li>
						<li class="list-group-item">Vertical and Horizontal</li>
						<li class="list-group-item">Grid and axis options</li>
						<li class="list-group-item">Stacked & PercentStacked</li>
						<li class="list-group-item">Colors, units, formats</li>
					</ul>
				</div>
				<div class="col">
					<h5>Slide 6</h5>
					<h6>3D Bar Chart</h6>
					<ul class="list-group list-group-flush">
						<li class="list-group-item">3D Bar, 3D Cone, 3D Cylinder, 3D Pyramid</li>
					</ul>
				</div>
				<div class="col">
					<h5>Slide 7</h5>
					<h6>Tornado Chart</h6>
					<ul class="list-group list-group-flush">
						<li class="list-group-item">Tornado Type</li>
					</ul>
				</div>
				<div class="col" desc="chart-slides-8-10">
					<h5>Slides 8-10</h5>
					<h6>Line Chart</h6>
					<ul class="list-group list-group-flush">
						<li class="list-group-item">Smoothing, Shadow, Size, Symbols</li>
						<li class="list-group-item">Data Symbol, Size</li>
						<li class="list-group-item">Lots of Categories</li>
					</ul>
				</div>
				<div class="col">
					<h5>Slide 11</h5>
					<h6>Area Chart</h6>
					<ul class="list-group list-group-flush">
						<li class="list-group-item">Area Chart, Stacked Area Chart</li>
					</ul>
				</div>
				<div class="col">
					<h5>Slides 12-13</h5>
					<h6>Pie Chart</h6>
					<ul class="list-group list-group-flush">
						<li class="list-group-item">Various options</li>
						<li class="list-group-item">Doughnut Type</li>
					</ul>
				</div>
				<div class="col">
					<h5>Slide 14</h5>
					<h6>X Y (Scatter) Chart</h6>
					<ul class="list-group list-group-flush">
						<li class="list-group-item">Various Options</li>
					</ul>
				</div>
				<div class="col">
					<h5>Slide 15</h5>
					<h6>Bubble Chart</h6>
					<ul class="list-group list-group-flush">
						<li class="list-group-item">Various Options</li>
					</ul>
				</div>
				<div class="col">
					<h5>Slide 16</h5>
					<h6>Radar Chart</h6>
					<ul class="list-group list-group-flush">
						<li class="list-group-item">Various Options</li>
					</ul>
				</div>
				<div class="col">
					<h5>Slides 17-18</h5>
					<h6>Multi-Level Category Axes</h6>
					<ul class="list-group list-group-flush">
						<li class="list-group-item">Multiple Chart Types</li>
						<li class="list-group-item">Three Level Axes</li>
					</ul>
				</div>
				<div class="col">
					<h5>Slides 19-20</h5>
					<h6>Combo Chart</h6>
					<ul class="list-group list-group-flush">
						<li class="list-group-item">Example</li>
						<li class="list-group-item">Various Options</li>
					</ul>
				</div>
				<div class="col">
					<h5>Slide 21</h5>
					<h6>Misc Options</h6>
					<ul class="list-group list-group-flush">
						<li class="list-group-item">Shadows and Transparent Color</li>
					</ul>
				</div>
			</div>
		</div>
		<div class="card-footer text-center">
			<button id="btnGenFunc_Chart" type="button" class="btn btn-success px-5">Run Demo</button>
		</div>
	</div>
</div>
